<template>
  <div class="banner">
    <div class="item">
      <div class="title">每一次检测<br />都可能带来惊喜</div>
      <div class="desc">我们为您提供智能、高效、开放、安全的检测服务</div>
      <button class="btn">
        我要送检
        <span
          class="material-symbols-outlined"
          style="margin-left: 5px; font-size: 18px"
        >
          arrow_forward
        </span>
      </button>
    </div>
  </div>
</template>

<script setup></script>

<style scope lang="scss">
.banner {
  height: dpi(85rem);
  background: url('~@/assets/images/Banner.png') no-repeat; // 100%/100%
  background-size: cover;
  // background-position: center;
  .item {
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    .title {
      width: dpi(43rem);
      margin: 0 auto;
      margin-top: dpi(18rem);
      font-size: dpi(6rem);
      color: #fff;
      text-align: center;
    }
    .desc {
      width: dpi(53rem);
      margin: dpi(8rem) auto;
      font-size: dpi(3rem);
      letter-spacing: 0rem;
      color: #7fcfe2;
      text-align: center;
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: dpi(25rem);
      height: dpi(8rem);
      background: #ff0000;
      font-size: dpi(2.4rem);
      color: #ffffff;
      outline: none;
      border: none;
    }
  }
}
</style>
